<template>
  <div id="detail">
    <div class="novelImg">
      <img
        :src="imgsrc"
        alt=""
      >
    </div>
    <div class="novelMsg">
      <p>作者：{{author}} </p>
      <p>小说名:{{novelname}}</p>
      <p>章节数：{{novelcount}}</p>
      <span
        class="star"
        :class="{redStyle:onflag}"
        @click="starchange()"
      >
        <i class="icon icon-star"></i> {{starMsg!=''?'已收藏':'未收藏'}}
      </span>
    </div>
    <h4>{{content}}</h4>
    <h3 class="comment">评论区</h3>
    <ul>
      <li
        v-for="(item,index) in comments"
        :key="index"
      >
        {{item.user}}说： {{item.comment}}
      </li>
    </ul>
    <div class="returnNovel">
      <button
        class="btn btn-info"
        @click="$router.back()"
      >返回</button>
      <button
        class="btn btn-info"
        @click="comment()"
      >评论</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { MessageBox } from 'mint-ui'
export default {
  name: 'Detail',
  data () {
    return {
      novelId: '',
      novelname: '',
      content: '',
      author: '',
      onflag: false,
      starMsg: '',
      novelcount: '',
      comments: [],
      imgsrc: require('./images/' + this.$route.query.id + '.png')
    }
  },
  mounted () {
    // 接受参数
    this.novelId = this.$route.query.id
    // 发送axios请求
    var url = 'http://localhost:3000/api/data/data'
    axios.post(url).then((response) => {
      var data = response.data.data[this.novelId - 1]
      if (this.novelId <= 4) {
        this.novelname = data.novelName
        this.content = data.content
        this.author = data.author
        this.comments = data.comments != null ? data.comments : this.comments
        this.novelcount = data.novelcount
      }
    })
  },
  methods: {
    comment () {
      MessageBox.prompt('请输入评论', {
        title: ''
      }).then(({ value, action }) => {
        const userComment = {
          user: localStorage.getItem('username'),
          comment: value
        }
        this.comments.push(userComment)
      })
    },
    starchange () {
      this.onflag = !this.onflag
      if (this.starMsg === '') {
        this.starMsg = '1'
      } else {
        this.starMsg = ''
      }
    }
  },
  computed: {
  }
}
</script>

<style scoped>
#detail {
  width: 100%;
  padding: 5px;
  background: white;
  text-align: center;
}
.novelImg {
  width: 40%;
  height: 195px;
  float: left;
}
.novelMsg {
  width: 60%;
  height: 195px;
  float: right;
}
.redStyle {
  color: red;
}
.returnNovel {
  margin-top: 10px;
  text-align: center;
}
.returnNovel button {
  margin: 10px;
}
</style>
